<template>
    <div class="center">
        <el-row>
            <el-col>
                <div class="person-material">
                    <img src="https://img1.baidu.com/it/u=453388902,3140765832&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=400" alt="">
                    <h3 class="material-name">{{AdminName}}</h3>
                    <div class="material-sign">{{AdminSign}}</div>
                    <div class="material-other">
                        <p><i class="el-icon-s-management">专业技能:</i>&nbsp;&nbsp;{{AdminSpecialty}}</p>
                        <p><i class="el-icon-s-order">爱好:</i>&nbsp;&nbsp;{{AdminHobby}}</p>
                        <p><i class="el-icon-map-location">位置信息:</i>&nbsp;&nbsp;{{AdminMap}}</p>
                    </div>

                    <div class="material-tags">
                        <div class="tags-name">标签</div>
                        <div class="tags-tag">
                            <el-tag
                                :key="tag"
                                v-for="tag in dynamicTags"
                                closable
                                :type="itemStyle[Math.floor(Math.random() * itemStyle.length)]"
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                                    {{tag}}
                            </el-tag>

                            <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                            >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                        </div>
                    </div>

                    <div class="individual-team">
                        <div class="team-name">
                            团队
                        </div>
                        <div class="team-members" v-for="item in team" :key="item.name">
                            <el-avatar :src="item.headImg"></el-avatar>
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                </div>
            </el-col>


            <el-col>
                <div class="person-sundries">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                        <el-menu-item @click="activeIndex = '1'" index="1" >活动</el-menu-item>
                        <el-menu-item @click="activeIndex = '2'" index="2" >时间线</el-menu-item>
                        <el-menu-item @click="activeIndex = '3'" index="3" >系统问题</el-menu-item>
                    </el-menu>
                    <Activity v-show="activeIndex === '1' ? true : false"/>
                    <Timeline v-show="activeIndex === '2' ? true : false"/>
                    <Problem v-show="activeIndex === '3' ? true : false"/>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Activity from '@/components/slot/Activity'
import Problem from '@/components/slot/Problem'
import Timeline from '@/components/slot/Timeline'
export default {
    name:'Center',
    components:{
        Activity,
        Timeline,
        Problem
    },
    data() {
        return {
            //person-material
            AdminName:'CC',
            AdminSign:'有个世界等你来改变，做自己的英雄！',
            AdminSpecialty:'上课神游、遇事不决、能拖必拖',
            AdminHobby:'游手好闲、玩世不恭、扮猪吃虎',
            AdminMap:'广州某学院东莞校区',
            itemStyle:['','success','info','danger','warning'],
            dynamicTags: ['只要还活着就一定好事发生在别人身上', '严重拖延症患者', '很有想象力', '十分缺钱', '心有余，力不足', '又特么体测', '有病吧ljxx'],
            inputVisible: false,
            inputValue: '',
            team:[
                {
                    headImg:'https://img1.baidu.com/it/u=453388902,3140765832&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=400',
                    name:'CC'
                },
                {
                    headImg:'https://i0.hdslb.com/bfs/face/28fba504bf1051887bd9133ac0aa4a3cabc09eda.jpg@96w_96h_1c.webp',
                    name:'壮烈成仁-'
                },
                {
                    headImg:'https://i2.hdslb.com/bfs/face/2478f86f89eb973b72ff6eef427f42153646134c.jpg@96w_96h_1c.webp',
                    name:'DM袋喵'
                },
                {
                    headImg:'https://i1.hdslb.com/bfs/face/8e0855234dcedacdc844fe59d762ad5c7042c7b9.jpg@96w_96h_1c.webp',
                    name:'考潜水执照吗，找我八折'
                },
                {
                    headImg:'https://i2.hdslb.com/bfs/face/1d50520364705ccbcb4f75958b0259adf202f3af.jpg@96w_96h_1c.webp',
                    name:'弃医从机'
                },
            ],

            //person-sundries
            activeIndex: "2",
        }
    },
    methods: {
        handleClose(tag) 
        {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() 
        {
            this.inputVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() 
        {
            let inputValue = this.inputValue;
            if (inputValue) 
                this.dynamicTags.push(inputValue);
            this.inputVisible = false;
            this.inputValue = '';
        },



        handleSelect(key, keyPath) 
        {
            console.log(key, keyPath);
        }
    }
}
</script>

<style lang="less" scoped>
    .center
    {
        color: #606266;
        .el-row
        {
            display: flex;
            .el-col:nth-child(1)
            {
                width: 30%;
                margin-right: 1%;
            }
            .el-col:nth-child(2)
            {
                width: 69%;
            }
        }
        .person-material
        {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-shadow:0px 6px 10px #e7e7e7;
            border: 1px solid #e7e7e7;
            border-radius: 8px;
            padding: 24px;
            img
            {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
            .material-name
            {
                margin-top: 16px;
                color: rgb(61, 61, 61);
                
            }
            .material-other
            {
                margin-top: 20px;
                width: 98%;
                padding-bottom: 20px;
                border-bottom: 1px dashed #e7e7e7;
                p
                {
                    margin-top: 10px;
                }
            }
            .material-tags
            {
                width: 98%;
                padding: 10px 0 20px;
                border-bottom: 1px dashed #e7e7e7;
                .tags-name
                {
                    padding: 6px 0 6px 0;
                }
                .el-tag 
                {
                    margin-right: 10px;
                    margin-top: 10px;
                }
                .tags-tag
                {
                    display: -webkit-flex;
                    display: flex;
                    flex-wrap:wrap;
                }
                .button-new-tag 
                {
                    height: 32px;
                    line-height: 30px;
                    padding-top: 0;
                    padding-bottom: 0;
                    margin-top: 10px;
                }
                .input-new-tag 
                {
                    margin-top: 10px;
                    width: 90px;
                    vertical-align: bottom;
                }
            }
            .individual-team
            {
                padding: 10px 0 20px;
                width: 98%;
                display: flex;
                flex-wrap:wrap;
                .team-name
                {
                    width: 100%;
                    padding: 10px 0 0;
                }
            }
            .team-members
            {
                
                width: 50%;
                // border: 1px dashed red;
                display: flex;
                align-items: center;
                margin-top: 20px;
                .el-avatar
                {
                    min-width: 40px;
                }
                p
                {
                    min-width: 50px;
                    margin-left: 10px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor:pointer;
                }
            }
        }
        .person-sundries
        {
            // box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            box-shadow:0px 6px 10px #e7e7e7;
            border: 1px solid #e7e7e7;
            border-radius: 8px;
            padding: 24px;
        }
    }


    @media all and (max-width: 1200px)
    {
        .el-row
        {
            // border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .el-col:nth-child(1)
            {
                width: 100% !important;
                margin-right: 0% !important;
            }
            .el-col:nth-child(2)
            {
                width: 100% !important;
                margin-top: 10px;
            }
        }
    }
</style>